<!DOCTYPE html>
<!-- 声明html5标准 -->
<html lang='zh'>
<!-- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站
对html页面本身不会有影响,这些现在都是html规范，你的页面越规范，就越容易被收录 -->

<head>
    <meta charset='UTF-8'>
    <!-- 声明使用UTF-8 Unicode编码，UTF-8编码优先采用的编码 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!--  X-UA-Compatible是针对IE新加的一个设置 声明兼容到edge -->
    <meta name='viewport' content='width=device-width, initial-scale=no'>
    <!--width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 -->
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src='./js/vue.js'></script>
</head>

<body>
    <div id='root'>
        <!-- 点击按钮改变标签的内容  触发beforeUpdate 和updated-->
        <button @click="changeVlue">点击改变值</button>
        <div id="main" ref="dom1">{{text}}</div>
        <a href="http://www.shangyuninfo.com">尚云官网</a>
    </div>
    <script>
        // 1 生命周期函数:vue页面从创建,修改,销毁的过程叫生命周期函数. 

        let vue = new Vue({
            // 选择控制区域,通过选择器去选到他，工作中一般使用id选择器;
            el: '#root',
            // 数据储存位置
            data: {
                text: "我是一段文本"
            },
            // 方法的储存位置
            methods: {
                changeVlue() {
                    this.text = "我改了值"
                }
            },
            // 这是第一个声明周期函数,这时data和methods里面的数据还有挂载到vue实例中.
            beforeCreate() {
                // 做重定向的操作
                // if(!localStorage.token){
                // }
                console.log(this.text)
            },
            // 第二个生命周期函数,这时已经能拿到data和methods里面的数据. 证明vue实例已经初始化成功了
            created() {
                // 一般进行接口请求.以及数据的处理. 
            },
            // 第三个生命周期函数, 这时还没有渲染到页面,将编译好的模板渲染到虚拟dom中. 但是未将模板添加到页面上去
            beforeMount() {
                // 不能进行dom操作. 
            },
            // 第四个生命周期函数,这时已经将模板渲染到网页中.  
            mounted() {
                // dom操作, 一些插件初始化. 
            },
            // 第五个生命周期函数,当页面的dom发生改变时触发,这时dom元素中的值还未发生改变 ,但是data里面的值已经发生改变了
            beforeUpdate() {
                let dom = document.getElementById("main")
                // console.log(this.$refs.dom1.innerHTML)
                console.log(dom.innerHTML);
                console.log(dom);
                console.log(this.text)
            },
            // 第六个生命周期函数,当页面的dom发生改变时触发,这时dom元素的中值发生改变了,data里的值页改变了. 
            updated() {
                // 监听dom发生改变时,做出效果。 
                let dom = document.getElementById("main")
                // console.log(dom);
                // console.log(this.text)
            },
            // 第七个声明周期函数,当页面销毁时，触发的第一个函数，这时还能拿到data，methods，定时器。  
            beforeDestory() {
                // 消除定时器。
                debugger
            },
            destoryed() {
                debugger
                // 第八个生命周期函数，当页面销毁时，触发的第二个函数，这时已经拿不到data，methods，定时器了。
            }
        })
    </script>
</body>

</html>